<template>
  <div id="new-login" class="stepper">
    <div class="upper">
      <div class="title">订单查询</div>
    </div>
    <div class="desc">请输入电话约单时预留的手机号码来查询</div>
    <div class="input-field">
      <md-field class="phone-input">
        <md-field-item>
          <md-input-item
            name="phone"
            data-vv-name="手机号"
            ref="phoneInput"
            v-model="phone"
            v-validate="'required|phone'"
            placeholder="请输入电话约单预留手机号码"
            :maxlength="11"
            type="phone"
            size="large"
          ></md-input-item>
        </md-field-item>
      </md-field>
    </div>
    <md-button @click="login" :disabled="phone===''">查询</md-button>
  </div>
</template>
<script>
import { Field, InputItem, FieldItem, Button, Toast, Icon, Dialog } from 'mand-mobile';
import { mapGetters } from 'vuex';
import Utils from '@/common/pakjUtils';
import WxUtils from '@/common/weixinUtils';

export default {
  name: 'phone-order-getphone',
  components: {
    [InputItem.name]: InputItem,
    [Field.name]: Field,
    [FieldItem.name]: FieldItem,
    [Button.name]: Button,
    [Icon.name]: Icon,
    [Toast.name]: Toast,
    [Dialog.name]: Dialog
  },
  data() {
    return {
      phone: ''
    };
  },
  methods: {
    login() {
      this.$validator.validateAll().then(res => {
        if (this.errors.has('手机号')) {
          Toast({
            content: this.errors.all()[0],
            duration: 3000
          });
          return;
        } else {
          this.$store.commit('setCurrentPhone', this.phone);
          this.$store
            .dispatch('getPhoneOrdersByPhone', this.phone)
            .then(() => {
              if (this.phoneOrderList instanceof Array) {
                if (this.phoneOrderList.length <= 0) {
                  Toast({
                    content: '该手机号暂无未支付的订单',
                    duration: 3000
                  });
                } else if (this.phoneOrderList.length > 1) {
                  this.$router.push({
                    name: 'PhoneOrderList',
                    query: {
                      phone: this.phone
                    }
                  });
                } else {
                  let orderInfo = this.phoneOrderList[0];
                  this.$router.push({
                    name: 'PhoneOrderPayment',
                    query: {
                      orderno: orderInfo.order_no
                    }
                  });
                }
              }
            })
            .catch(reason => {
              Dialog.alert({
                title: '错误',
                content: reason.message
              });
            });
        }
      });
    }
  },
  computed: {
    ...mapGetters(['phoneOrderList', 'getToken'])
  }
};
</script>
<style lang="stylus">
#new-login {
  padding: 40px;

  a {
    color: color-primary;
  }

  .upper {
    margin-top: 68px;
  }

  .input-field {
    margin-bottom: 20px;
    border-bottom: 1px solid #E0E0E0;

    .left {
      margin-left: 0px !important;
    }

    .md-field-item-inner {
      padding: 0 0;
    }

    .md-field-item {
      padding: 0 0;
    }

    .md-input-item {
      padding: 0 0;

      ::-moz-placeholder {
        color: color-text-caption;
      }

      ::-webkit-input-placeholder {
        color: color-text-caption;
      }

      :-ms-input-placeholder {
        color: color-text-caption;
      }
    }
  }
}
</style>
